<template>
    <div class="verifyProfile">
        <div class='moduleHead'>
            <router-link :to="{name:'me'}">
                <span class="back"></span>
            </router-link>
            <span>{{language.verifyProfile_title}}</span>
        </div>
        <div class="body">
            <div class="prompt_box" v-html="language.verifyProfile_prompt"></div>
            <div class="photo_box">
                <h4>{{language.verifyProfile_photoH4}}</h4>
                <p>{{language.verifyProfile_photoP}}</p>
                <p class="note">{{language.verifyProfile_note}}</p>
                <img src="../assets/identity_eg.jpg" alt="">
            </div>
            <div class="button_box">
                <div class="btn">
                    {{language.verifyProfile_verifyNow}}
                    <input @change="submitData" type="file" accept="image/*">
                </div>
            </div>
            <div class="allInfo_box">
                {{language.verifyProfile_allInfo}}
            </div>
        </div>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api';
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'verifyProfile',

    components: {
        publicDialog,
        loading
    },

    data: function() {
        return {
            loadingAjax: false,
            dialogData: {},
        }
    },

    activated() {
        this.dialogData = {}
    },

    methods: {

        submitData(e) {

            var tthis = this,
                data = new FormData(),
                verify_type = ['photo'];

            this.loadingAjax = true;
            if (e.target.value.length > 0) {
                data.append("file0", e.target.files[0]);
            }
            data.append('types', JSON.stringify(verify_type));

            API.verify({
                data: data,
                success: function(data) {
                    if (data.results == 1) {
                        tthis.dialogData = {
                            position: 'top',
                            type: 'successful',
                            content: {
                                info: tthis.language.unify_photoUpdateSuccess
                            }
                        };
                        setTimeout(function() {
                            tthis.$router.push({
                                name: 'me'
                            })
                        }, 2000);
                    } else {
                        tthis.dialogData = {
                            position: 'top',
                            type: 'error',
                            content: {
                                info: tthis.language.unify_photoUpdateFailed
                            }
                        };
                    }
                },
                complete: function() {
                    tthis.loadingAjax = false;
                }
            })
        }
    }
}

</script>
<style scoped>
.verifyProfile {
    padding-top: 44px;
    font-size: 14px;
    background-color: #f7f7f7;
}

.verifyProfile .body {
    padding-bottom: 40px;
}

.verifyProfile .prompt_box {
    font-size: 14px;
    text-align: center;
    color: #000;
    padding: 12px 0;
}

.verifyProfile .photo_box {
    background: #fff;
    padding: 14px;
}

.verifyProfile .photo_box h4 {
    font-size: 13px;
    font-weight: normal;
    line-height: 16px;
}

.verifyProfile .photo_box p {
    font-size: 12px;
    color: #666;
    padding-top: 4px;
}

.verifyProfile .photo_box .note {
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
}

.verifyProfile .photo_box img {
    max-width: 84%;
    margin: auto;
    display: block;
    margin-top: 14px;
}

.verifyProfile .button_box {
    padding: 24px 30px 0;
}

.verifyProfile .button_box div {
    position: relative;
}

.verifyProfile .button_box input[type="file"] {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.verifyProfile .allInfo_box {
    text-align: center;
    font-size: 12px;
    text-align: center;
    color: #666;
    padding: 10px 0;
}

</style>
